<template>
  <section class="me" style="position:absolute;top:0px;width:100%;">
    <section class="profile-number">
      <img  :src="avatar" class="privateImage">
      <p>{{nickName}}</p>
      <x-button mini @click.native="handleBindMobile" :disabled="false" v-if="bindMobile==='0'"><span style="color:#2e9670;">绑定手机</span></x-button>
      <x-button mini @click.native="handleBindMobile" :disabled="true" v-if="bindMobile==='1'"><span style="color:#2e9670;">已绑定</span></x-button>
      <!--<span style="color:#2e9670;">{{bindMobile==='0'?'绑定手机':'已绑定'}}</span> -->

    </section>
    <group>
      <cell-box is-link link="/order">
        <p class="icon_order_txt"><i class="icon-order" ></i>我的订单</p>
      </cell-box>
      <cell-box is-link link="/me/coupon">
        <p class="icon_order_txt"><img :src="coupon" alt="优惠券" style="width:.8rem;height:.8rem;vertical-align:middle;padding-right:.3rem;">优惠券</p>
      </cell-box>
      <cell-box @click.native="handleBp" value="积分兑换" is-link >
        <p class="icon_order_txt"><img :src="jifen" alt="积分" style="width:.8rem;height:.8rem;vertical-align:middle;padding-right:.3rem;">积分:{{bp}}</p>
      </cell-box>
    </group>
    <!-- <flexbox>
        <flexbox-item>
          <x-button type="primary" >分享到朋友圈</x-button>
        </flexbox-item>
        <flexbox-item>
          <x-button type="primary" >分享给朋友</x-button>
        </flexbox-item>
    </flexbox> -->
    <footer-component></footer-component>
  </section>
</template>
<script>
import { Group, CellBox,XButton,Flexbox, FlexboxItem} from 'vux'
import {getStore} from '@/config/mUtils'
import FooterComponent from 'components/footer'
import {url} from '@/config/config'
import {mapState} from 'vuex'
export default {
  name: 'me',
  data(){
    return{
      openId: null,
      nickName: '',
      avatar: require('@/assets/me.png'),
      bindMobile: 1,
      coupon: require('@/assets/coupon.png'),
      jifen: require('@/assets/jifen.png')
    }
  },
  computed:{
    ...mapState({
      bp: state=>state.app.bp
    })
  },
  components: {
    Group,
    CellBox,
    FooterComponent,
    XButton,
    // Flexbox,
    // FlexboxItem
  },
  created(){
    // this.$wechat.
    // 判断是否有openid
    if(getStore('wxcode')){
      this.openId = getStore('wxcode')
		}
    if(getStore('avatar')){
      this.avatar = getStore('avatar')
    }
    if(getStore('nickname')){
      this.nickName = getStore('nickname')
    }
    if(getStore('bindMobile')){
      this.bindMobile = getStore('bindMobile')
    }
  },
  methods: {
    handleBindMobile(){
      if(this.bindMobile === '0'){
        this.$router.push('/me/bindMobile');
      }
    },
    handleBp(){
      alert('该模块正在开发中')
    }
  }
}
</script>
<style scoped>
.profile-number{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -webkit-flex-direction: column;
  -webkit-flex-wrap: wrap;
  -moz-flex-direction: column;
  -moz-flex-wrap: wrap;
  padding: 1.125rem .6rem;
  /* background-color: #2e9670; */
  background-image: url('../../assets/bg_me.png');
  background-repeat:no-repeat;
  background-position:0px 0px;
  background-size:cover;
}
.profile-number > p{
  padding: .6rem 0rem;
  font-size: .6rem;
  color:#fff;
}
.icon-order{
  margin-right:.36rem;
}
.privateImage{
  display:inline-block;width:2.5rem;height:2.5rem;border-radius:50%;vertical-align:middle;
}
.icon_order_txt{
  font-size: 0.46rem;
}
</style>
